<template>
  <div class="order-info">
    <div class="item-card">
      <div class="title">服务商</div>
      <div class="lists">
        <div class="list-item">
          <p>服务商昵称:</p>
          <p>{{ info.agent_linkman }}</p>
        </div>
        <div class="list-item">
          <p>绑定电话:</p>
          <p>{{ info.agent_phone }}</p>
        </div>
      </div>
    </div>

    <div class="item-card">
      <div class="title">收货信息</div>
      <div class="lists" style="grid-template-columns: repeat(1, 1fr)">
        <div class="list-item">
          <p>收货人:</p>
          <p>{{ info.u_real_name }}</p>
        </div>
        <div class="list-item">
          <p>收货电话:</p>
          <p>{{ info.u_phone }}</p>
        </div>
        <div v-if="info.user_address" class="list-item">
          <p>收货地址:</p>
          <p>{{ info.user_address }}</p>
        </div>
      </div>
    </div>

    <div class="item-card">
      <div class="title">用户信息</div>
      <div class="lists">
        <div class="list-item">
          <p>用户昵称:</p>
          <p>{{ info.user_name }}</p>
        </div>
        <div class="list-item">
          <p>绑定电话:</p>
          <p>{{ info.user_phone }}</p>
        </div>
      </div>
    </div>
    <div class="item-card">
      <div class="title">订单信息</div>
      <div class="lists">
        <div class="list-item" style="grid-column: span 2;">
          <p>租赁产品:</p>
          <p>{{ info?.product_title }}</p>
        </div>
        <div v-if="info.product_is_sn" class="list-item">
          <p style="flex-shrink: 0;">产品SN:</p>
          <p>SN:{{info.product_sn}}</p>
        </div>
        <div class="list-item">
          <p>租赁天数:</p>
          <p>{{ info?.rent_day }}天</p>
        </div>
        <div class="list-item">
          <p>开始日期:</p>
          <p>{{ info?.start_rent_date }}</p>
        </div>
        <div class="list-item">
          <p>结束日期:</p>
          <p>{{ info?.end_rent_date }}</p>
        </div>
        <div class="list-item">
          <p>订单金额:</p>
          <p>￥{{ info.pay_total_fee }}</p>
        </div>
        <div class="list-item">
          <p>已付金额:</p>
          <p>￥{{ info.have_pay_fee }}</p>
        </div>
        <div class="list-item">
          <p>订单状态:</p>
          <t-tag v-if="info.order_status === -1" theme="default" variant="outline">已取消</t-tag>
          <t-tag v-if="info.order_status === 1" theme="success" variant="outline">已完成</t-tag>
          <t-tag v-if="info.order_status === 2" theme="warning" variant="outline">待付款</t-tag>
          <t-tag v-if="info.order_status === 3" theme="warning" variant="outline">待确认(日期)</t-tag>
          <t-tag v-if="info.order_status === 31" theme="warning" variant="outline">待确认(地址)</t-tag>
          <t-tag v-if="info.order_status === 4" theme="warning" variant="outline">待发货</t-tag>
          <t-tag v-if="info.order_status === 5" theme="warning" variant="outline">待取货</t-tag>
          <t-tag v-if="info.order_status === 6" theme="warning" variant="outline">租赁中</t-tag>
          <t-tag v-if="info.order_status === 7" theme="warning" variant="outline">待归还</t-tag>
        </div>
        <div v-if="info.pay && info.pay.length" class="list-item">
          <p>支付时间:</p>
          <p>{{ info.pay[info.pay.length - 1].creation_time }}</p>
        </div>
        <div class="list-item">
          <p>创建时间:</p>
          <p>{{ info.creation_time }}</p>
        </div>
      </div>
    </div>

    <div v-if="info.user_remark" class="item-card">
      <div class="title">用户备注</div>
      <div class="lists" style="grid-template-columns: repeat(1, 1fr)">
        <div class="list-item">
          <p>{{ info.user_remark }}</p>
        </div>
      </div>
    </div>

    <div v-if="info.admin_remark" class="item-card">
      <div class="title">后台备注</div>
      <div class="lists" style="grid-template-columns: repeat(1, 1fr)">
        <div class="list-item">
          <p>{{ info.admin_remark }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Color from "@/components/color/index.vue";

export default {
  name: "OrderInfo",
  components: {Color},
  props: {
    info: {
      type: Object,
      default: ()=> {}
    }
  },
  data() {
    return {
      visible: true,
      value: 'first',
    }
  },
  methods: {
    onConfirm(context) {
      this.visible = false;
    },
    open() {
      this.visible = true
    },
    close(context) {
      this.visible = false
    },
  }
}
</script>

<style lang="less" scoped>
  /deep/ .info-card {
    .t-card__header {
      padding-bottom: var(--td-comp-paddingTB-s);
    }
    .t-card__body {
      padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-m);
      padding-top: 0;
    }
  }

  .order-info {
    padding: 0 var(--td-comp-paddingLR-l);
  }

  .item-card {
    padding: var(--td-comp-paddingTB-xl) 0;
    border-bottom: 1px dashed #e5e5e5;

    .title {
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 16px;
      color: black;
    }

    .lists {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;

      .list-item {
        display: flex;
        color: black;

        p:first-child {
          color: #999;
          padding-right: 6px;
        }
      }
    }
  }
</style>
